<template>
  <div class="applicationReminderContainer">
    <!-- 温馨提示 -->
    <el-card class="card"
             shadow="never">
      <el-form :rules="rules"
               ref="form"
               :model="form"
               class="ruleForm">
        <el-row :gutter="5">
          <el-col v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 24 }">
            <div class="prompt">
              <h6 class="Tips">温馨提示</h6>
              <tinymce-editor v-model="form.warmReminder"
                              resize="none"
                              :init="{ height: 905 }" />
            </div>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 24 }">
            <div class="withdrawalForm">
              <el-form-item label="提现方式"
                            prop="withdrawalMethod">
                <el-radio-group v-model="form.withdrawalMethod">
                  <el-radio :value="1"
                            :label="1">全部</el-radio>
                  <el-radio :value="2"
                            :label="2">支付宝</el-radio>
                  <el-radio :value="1"
                            :label="3">微信</el-radio>
                  <el-radio :value="4"
                            :label="4">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 支付宝自定义名称 -->
              <div v-if="form.withdrawalMethod!==4">

                <el-form-item label="最低额度:"
                              prop="minimumAmount">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.minimumAmount"
                            placeholder="请输入申请的提现额度"> <template slot="append">元</template></el-input>
                  <div style="color: #b4b4b4"></div>
                </el-form-item>

                <!-- 提现手续费率 -->

                <el-form-item label="提现手续费率"
                              prop="rate">
                  <el-input min="0"
                            max="100"
                            type="number"
                            clearable
                            v-model="form.rate"
                            placeholder="请输入申请提现手续费"> <template slot="append">%</template></el-input>
                  <div style="color: #b4b4b4">注意:【提现时扣除的提现手续费,空为不扣除提现手续费】</div>
                </el-form-item>

                <!-- 每日提现次数 -->
                <el-form-item label="每日提现次数"
                              prop="withdrawalFrequency">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.withdrawalFrequency"
                            placeholder="请输入每日申请提现次数" />
                  <div style="color: #b4b4b4">注意:【每日额度可提现次数】</div>
                </el-form-item>
                <el-form-item label="支付宝自定义名称"
                              prop="zfbCustomName">
                  <el-input clearable
                            v-model="form.zfbCustomName"
                            placeholder="请输入支付宝自定义名称" />
                  <div style="color: #b4b4b4">注意:【用于技师端的提现方式名称修改】</div>
                </el-form-item>

                <el-form-item label="微信自定义名称"
                              prop="wxCustomName">
                  <el-input clearable
                            v-model="form.wxCustomName"
                            placeholder="请输入支付宝自定义名称" />
                  <div style="color: #b4b4b4">注意:【用于技师端的提现方式名称修改】</div>
                </el-form-item>
                <div class="flex-start">
                  <el-form-item label="支付宝自定义图标:"
                                prop="zfbCustomImg">
                    <div class="ele-image-upload-list">
                      <div class="ele-image-upload-item ele-image-upload-button"
                           @click="modalPicTap('dan', 'zfbCustomImg')">
                        <div>
                          <div tabindex="0"
                               class="el-upload el-upload--text">
                            <div class="el-upload-dragger">
                              <i class="el-icon-plus ele-image-upload-icon"></i>
                            </div>
                            <div class="ele-image-upload-item"
                                 style="margin: 0 0 0 0"
                                 v-if="form.zfbCustomImg">
                              <div class="el-image">
                                <img :src="form.zfbCustomImg"
                                     width="100%"
                                     height="100%"
                                     class="el-image__inner"
                                     style="object-fit: cover" />
                              </div>
                              <div class="ele-image-upload-close"
                                   @click="handleRemove('zfbCustomImg')"><i class="el-icon-close"></i></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="微信自定义图标:"
                                prop="wxCustomImg">
                    <div class="ele-image-upload-list">
                      <div class="ele-image-upload-item ele-image-upload-button"
                           @click="modalPicTap('dan', 'wxCustomImg')">
                        <div>
                          <div tabindex="0"
                               class="el-upload el-upload--text">
                            <div class="el-upload-dragger">
                              <i class="el-icon-plus ele-image-upload-icon"></i>
                            </div>
                            <div class="ele-image-upload-item"
                                 style="margin: 0 0 0 0"
                                 v-if="form.wxCustomImg">
                              <div class="el-image">
                                <img :src="form.wxCustomImg"
                                     width="100%"
                                     height="100%"
                                     class="el-image__inner"
                                     style="object-fit: cover" />
                              </div>
                              <div class="ele-image-upload-close"
                                   @click="handleRemove('wxCustomImg')"><i class="el-icon-close"></i></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="微信自定义选中图标:"
                                prop="wxCustomSelectImg">
                    <div class="ele-image-upload-list">
                      <div class="ele-image-upload-item ele-image-upload-button"
                           @click="modalPicTap('dan', 'wxCustomSelectImg')">
                        <div>
                          <div tabindex="0"
                               class="el-upload el-upload--text">
                            <div class="el-upload-dragger">
                              <i class="el-icon-plus ele-image-upload-icon"></i>
                            </div>
                            <div class="ele-image-upload-item"
                                 style="margin: 0 0 0 0"
                                 v-if="form.wxCustomSelectImg">
                              <div class="el-image">
                                <img :src="form.wxCustomSelectImg"
                                     width="100%"
                                     height="100%"
                                     class="el-image__inner"
                                     style="object-fit: cover" />
                              </div>
                              <div class="ele-image-upload-close"
                                   @click="handleRemove('wxCustomSelectImg')"><i class="el-icon-close"></i></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <el-form-item label="支付宝自定义选中图标:"
                                prop="zfbCustomSelectImg">
                    <div class="ele-image-upload-list">
                      <div class="ele-image-upload-item ele-image-upload-button"
                           @click="modalPicTap('dan', 'zfbCustomSelectImg')">
                        <div>
                          <div tabindex="0"
                               class="el-upload el-upload--text">
                            <div class="el-upload-dragger">
                              <i class="el-icon-plus ele-image-upload-icon"></i>
                            </div>
                            <div class="ele-image-upload-item"
                                 style="margin: 0 0 0 0"
                                 v-if="form.zfbCustomSelectImg">
                              <div class="el-image">
                                <img :src="form.zfbCustomSelectImg"
                                     width="100%"
                                     height="100%"
                                     class="el-image__inner"
                                     style="object-fit: cover" />
                              </div>
                              <div class="ele-image-upload-close"
                                   @click="handleRemove('zfbCustomSelectImg')"><i class="el-icon-close"></i></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <div v-if="form.withdrawalMethod!==4"
                   style="color: #b4b4b4; margin-bottom: 30px;">注意:【用于技师端的提现方式图标的修改】</div>

              <div v-if="form.withdrawalMethod==4"
                   style="color: #b4b4b4; margin-bottom: 30px;">注意:【关闭提现设置用于小程序的提现账号的隐藏】</div>
              <!-- 每日提现次数 -->
              <!-- <el-form-item label="每日最高额度" prop="maximumAmount">
                <el-input
                  min="0"
                  type="number"
                  clearable
                  v-model="form.maximumAmount"
                  placeholder="请输入每日申请提现最高额度"
                />
                <div style="color: #b4b4b4">注意:【每日最多可提现额度】</div>
              </el-form-item> -->
              <!-- 提交 重置 -->
              <div class="drawer__footer">
                <el-button v-if="form.withdrawalMethod!==4"
                           @click="resetForm('form')"
                           type="plain">重置</el-button>
                <el-button type="primary"
                           :loading="loading"
                           @click="save('form')">提交</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <uploadPictures ref="upload"
                      :isChoice="isChoice"
                      :visible.sync="modalPic"
                      @getPic="getPic"
                      :gridBtn="gridBtn"
                      :gridPic="gridPic"
                      :title="modalTitle"></uploadPictures>
    </el-card>
  </div>
</template>
<script>
import uploadPictures from '../components/uploadImg';
import {
  withdrawalSettingsInsert,
  withdrawalSettingsModify,
  withdrawalSettingsDetail
} from '@/api/withdrawalManagement/Settings/index';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
export default {
  name: 'applicationReminder',
  components: { TinymceEditor, uploadPictures },
  data () {
    return {
      content: '',
      isUpdate: false,
      loading: false,
      modalPic: false,
      isChoice: '单选',
      form: {
        // 提现方式 1.全部 2.支付宝 3.微信
        withdrawalMethod: 1,
        // 最低额度
        minimumAmount: '',
        // 支付宝名称修改
        zfbCustomName: '',
        // 微信名称修改
        wxCustomName: '',
        // 支付宝图片修改
        wxCustomImg: '',
        // 微信选择图标
        wxCustomSelectImg: '',
        // zfb选择图标
        zfbCustomSelectImg: '',
        // 微信图片修改
        zfbCustomImg: '',
        // 费率
        rate: '',
        // 提现次数
        withdrawalFrequency: '',
        // 最高额度
        //   maximumAmount: '',
        // 温馨提示
        warmReminder: '',
        // 站点id
        siteId: this.$store.state.site.info.id
      },

      receivingAccountOption: [],
      rules: {
        withdrawalMethod: [
          {
            required: true,
            message: '请选择提现方式',
            trigger: 'blur'
          }
        ],

        minimumAmount: [
          { required: true, message: '请输入最低提现额度', trigger: 'blur' }
        ],
        rate: [
          { required: true, message: '请输入提现费率', trigger: 'blur' }
        ],
        withdrawalFrequency: [
          { required: true, message: '请输入提现次数', trigger: 'blur' }
        ],
        maximumAmount: [
          { required: true, message: '请输入最高提现额度', trigger: 'blur' }
        ],
        warmReminder: [
          { required: true, message: '请输入温馨提示', trigger: 'blur' }
        ]
      }
    };
  },
  // 路由刷新
  activated () {
    this.query();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    async query () {
      const res = await withdrawalSettingsDetail({ siteId: this.form.siteId });
      this.current = res;

      if (this.current) {
        this.$util.assignObject(this.form, {
          ...res
        });
        this.isUpdate = true;
      } else {
        this.isUpdate = false;
      }
    },
    // 选择图片
    modalPicTap (tit, picTit, openTitle) {
      this.modalTitle = openTitle;
      this.isChoice = tit === 'dan' ? '单选' : '多选';
      this.picTit = picTit;
      this.modalPic = true;
      this.$nextTick(() => {
        this.$refs['upload'].show();
      });
    },
    // 选中图片
    getPic (pc) {
      console.log('pc========', pc);
      switch (this.picTit) {
        case 'zfbCustomImg':
          this.form.zfbCustomImg = pc.imgUrl;
          break;
        case 'wxCustomImg':
          this.form.wxCustomImg = pc.imgUrl;
          break;
        case 'wxCustomSelectImg':
          this.form.wxCustomSelectImg = pc.imgUrl;
          break;
        case 'zfbCustomSelectImg':
          this.form.zfbCustomSelectImg = pc.imgUrl;
          break;
      }
      this.modalPic = false;
    },
    //删除图片
    handleRemove (field) {
      this.form[field] = '';
    },
    // 新增
    save () {
      this.$refs['form'].validate((valid) => {

        if (!valid) {
          return false;
        }
        this.loading = true;
        console.log(this.form);
        if (this.isUpdate) {
          this.form.id = this.current.id;
        }
        if (this.form.withdrawalMethod == 4) {
          this.form = {
            // 提现方式 1.全部 2.支付宝 3.微信
            withdrawalMethod: 4,
            // 最低额度
            minimumAmount: '',
            // 支付宝名称修改
            zfbCustomName: '',
            // 微信名称修改
            wxCustomName: '',
            // 支付宝图片修改
            wxCustomImg: '',
            // 微信选择图标
            wxCustomSelectImg: '',
            // zfb选择图标
            zfbCustomSelectImg: '',
            // 微信图片修改
            zfbCustomImg: '',
            // 费率
            rate: '',
            // 提现次数
            withdrawalFrequency: '',
            // 最高额度
            //   maximumAmount: '',
            // 温馨提示
            warmReminder: '',
            // 站点id
            siteId: this.$store.state.site.info.id
          }
          this.form.id = this.current.id;
        }
        const saveOrUpdate = this.isUpdate
          ? withdrawalSettingsModify
          : withdrawalSettingsInsert;
        saveOrUpdate(this.form)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg);
            if (!this.isUpdate) {
              this.$router.go(0);
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },

    resetForm () {
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        console.log(this.form);
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/.el-upload--picture-card {
  line-height: 187px;
}
.applicationReminderContainer {
  min-width: 630px;
  .box-card {
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      padding: 0px 0 0 30px;
    }
  }

  .applicationInfo {
    display: flex;
    justify-content: space-evenly;
    span {
      color: #757575;
      font-size: 18px;
    }
    div {
      margin: 7px 0 7px 0;
      color: #1e6ceb;

      font-size: 28px;
    }
  }
  .prompt {
    width: 100%;
    .Tips {
      color: #000;
      font-family: Inter;
      font-size: 20px;
      margin-bottom: 17px;
    }
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    overflow: hidden;
    .text {
      margin-top: 30px;
      white-space: wrap;
      margin-bottom: 10px; /* 调整间隔大小 */
      min-width: 490px;
      line-height: 1.5;
    }
  }
  .withdrawalForm {
    padding: 20px 30px 35px 30px;
    box-sizing: border-box;
    width: 100%;
    @media screen and (min-width: 1200px) {
      border-left: 1px solid #ebebeb;
    }

    .ruleForm {
      .el-form-item {
        width: 100% !important;
        .el-select {
          width: 100%;
        }
      }
      .drawer__footer {
        margin-top: 38px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>
